<template>
  <div>
      <!-- 面包屑 -->
      <bread-crumb :names="['首页','商品管理','添加商品']"></bread-crumb>
          <h2>此页面为开发人员测试页,您可不予理会</h2>
      <!-- 卡片 -->
      <el-card>
          <!-- 提示框 -->
           <el-alert
    title="添加商品信息"
    show-icon
    center
    type="info">
  </el-alert>
  <!-- 步骤条 -->
  <el-steps :active='activeStep' finish-status="success" align-center>
  <el-step title="基本信息"></el-step>
  <el-step title="商品参数"></el-step>
  <el-step title="商品属性"></el-step>
  <el-step title="商品图片"></el-step>
  <el-step title="商品内容"></el-step>
  <el-step title="完成"></el-step>
</el-steps>
<!-- tabs栏 -->
 <el-tabs tab-position="left" v-model="activeName">
    <el-tab-pane label="基本信息"  name='goodsInfo' :disabled="activeName!='goodsInfo'">
        <!-- 基本信息表单 -->
            <goodsinfo-form ref='goodsinfoForm'></goodsinfo-form>
            <div class="btn">
        <el-button type='primary' size='medium' @click="toParams">下一步</el-button>
        </div>
    </el-tab-pane>
    <el-tab-pane label="商品参数"  name='goodsparams' :disabled="activeName!='goodsparams'">
        <!-- 商品参数表单 -->
        <goods-params-form ref='goodsParamsForm'></goods-params-form>
        <div class="btn">
                       <el-button type='primary' @click="toInfo">上一步</el-button>
                   <el-button type='primary' @click="toAttr">下一步</el-button>
        </div>
     
        </el-tab-pane>
       
    <el-tab-pane label="商品属性" name='goodsattr' :disabled="activeName!='goodsattr'">
         <!-- 商品属性表单 -->
        <goods-attr-form ref='goodsAttrForm'> </goods-attr-form>
        <div class="btn">
                     <el-button type='primary' @click="toParams">上一步</el-button>
                   <el-button type='primary' @click="toImg" >下一步</el-button>
        </div>
     
        </el-tab-pane>
    <el-tab-pane label="商品图片" name='goodsimg' :disabled="activeName!='goodsimg'">
        <!-- 商品图片表单 -->
        <goods-img-form ref='goodsImgForm'></goods-img-form>
        <div class="btn">
            <el-button type='primary' @click="toAttr">上一步</el-button>
            <el-button type='primary' @click="toContent" >下一步</el-button>
        </div>
        
        </el-tab-pane>
    <el-tab-pane label="商品内容"  name='goodscontent' :disabled="activeName!='goodscontent'">
        <!-- 商品内容表单 -->
        <goods-introduce-form ref='goodsIntroduceForm'></goods-introduce-form>
        <div class="btn">
                 <el-button type='primary' @click="toImg">上一步</el-button>
                 <el-button type='primary' @click="submitInfo">提交</el-button>
        </div>
       
        </el-tab-pane>
  </el-tabs>
      </el-card>
  </div>
</template>

<script>
import BreadCrumb from 'common/BreadCrumb'
import GoodsinfoForm from './addchild/GoodsinfoForm'
import GoodsParamsForm from './addchild/GoodsParamsForm'
import GoodsAttrForm from './addchild/GoodsAttrForm'
import GoodsImgForm from './addchild/GoodsImgForm';
import GoodsIntroduceForm from './addchild/GoodsIntroduceForm'
import {addGoodsByAxios} from 'network/axios';
import {mapMutations} from 'vuex'
export default {
        name:'Add',
        components:{BreadCrumb,GoodsinfoForm,GoodsParamsForm,GoodsAttrForm,GoodsImgForm,GoodsIntroduceForm},
        data(){
            return{
                activeStep:0,
                activeName:'goodsInfo'
            }
        },
        methods:{
            ...mapMutations(['setGoodsInfo','setGoodsPics','setGoodsIntroduce','setGoodsParams']),
            toInfo(){
        
               this.activeStep=0
               this.activeName='goodsInfo'
            },
           toParams(){
                 this.$refs.goodsinfoForm.$refs.addGoodsInfoForm.validate(flag=>{
                if(!flag||this.$refs.goodsinfoForm.addGoodsInfoForm.goods_cat.length!=3){
                      this.$message.error('请根据提示完成当前页面的内容')
                      return 
                }else{
                      this.activeStep=1
               this.activeName='goodsparams'
                }
               
            })
             
           },
           toAttr(){
                this.activeStep=2
               this.activeName='goodsattr'
           },
           toImg(){
               this.activeStep=3
               this.activeName='goodsimg'
           },
           toContent(){
               this.activeStep=4,
               this.activeName='goodscontent'
           },
        submitInfo(){
             this.$confirm("确定提交该商品的信息吗?", "确认信息", {
        confirmButtonText: "确认提交",
        cancelButtonText: "我在想想",
      }).then(() => {
               var goodsInfo={}
                var goodsparams=[]
                var goodsAttr=[]
                var goodsImg=[]
                var  goodsIntroduce=''
                goodsInfo=this._.cloneDeep(this.$refs.goodsinfoForm.handleAddGoodsInfoForm)
                console.log(goodsInfo);
               this.$refs.goodsParamsForm.getParamsForm()
               goodsparams=this.$refs.goodsParamsForm.manyAttr
               //得到商品属性数据(静态)
                this.$refs.goodsAttrForm.getAttrForm()
               goodsAttr=this.$refs.goodsAttrForm.onlyAttr
               console.log(goodsAttr);
                goodsImg=this.$refs.goodsImgForm.pics
                console.log(goodsImg);
                goodsIntroduce=this.$refs.goodsIntroduceForm.value  
                console.log(goodsIntroduce);
                console.log('232322');
                console.log(goodsAttr);
                const attrs=[...goodsAttr,...goodsparams]
                console.log(attrs);
                console.log('222');
                this.setGoodsInfo(goodsInfo)
                //ok
                this.setGoodsPics({
                    pics:goodsImg
                })
                console.log('11----------------');
                  console.log(this.$store.state.addFromInfo);
                this.setGoodsIntroduce({
                    goodsIntroduce
                })
                this.setGoodsParams({
                    attrs:attrs
                });
                console.log('23');
                console.log(this.$store.state.addFromInfo);
            addGoodsByAxios(this.$store.state.addFromInfo).then(res=>{
                if(res.data.meta.status===201){
                    this.$message.success('创建商品成功')
                    this.$router.replace('/home/goods')
                }
            })
            console.log('2323');
        }).catch(() => {
          this.$message("您取消了删除操作");
        })     
        }

        }
}
</script>

<style scoped lang='less'>
    .el-alert{
        margin-bottom: 20px;
    }
    .el-tabs{
        margin-top: 30px;
    }
    .btn{
        display: flex;
        justify-content: flex-end;
       padding-right: 100px;
    }
    
</style>